<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 提示 -->
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
      <!-- Tab栏 -->
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          label-position="top"
      >
          <el-form-item label="商品名称" prop="goods_name" style="margin-bottom: 0;padding: 0">
            <el-input v-model="addForm.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="addForm.goodsPrice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品重量(g)" prop="goods_weight">
            <el-input v-model="addForm.goodsWeight" type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="addForm.goodsNumber" type="number"></el-input>
          </el-form-item>
          <el-form-item label="分类" label-width="80px">
            <template>
              <el-select v-model="value" placeholder="请选择">
                <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                <el-option v-for="c in catArr"
                           :label="c.catName"
                           :value="c.catId">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-upload
              action="http://localhost:8080/picture/upload"
              name="picFile"
              :limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <!-- 添加商品 -->
          <el-button type="primary" class="btnAdd" @click="addGoods">添加商品</el-button>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data:
      function () {
        return {
          //分类数组
          catArr: [],
          // 添加商品的表单对象
          addForm: {
            goodsName: '',
            goodsPrice: 0,
            goodsWeight: 0,
            goodsNumber: 0,
            // 图片的数组
            pics: [],
            // 商品详情
            goods_introduce: '',
            attrs: []
          },
          addFormRules: {
            goods_name: [
              {required: true, message: '请输入商品名称', trigger: 'blur'}
            ],
            goods_price: [
              {required: true, message: '请输入商品价格', trigger: 'blur'}
            ],
            goods_weight: [
              {required: true, message: '请输入商品重量', trigger: 'blur'}
            ],
            goods_number: [
              {required: true, message: '请输入商品数量', trigger: 'blur'}
            ],
            goods_cat: [
              {required: true, message: '请选择商品分类', trigger: 'blur'}
            ]
          },
          value: ''
        }
      },
  created() {
    this.getCateList()
  },
  computed: {
    getCateId() {
      if (this.addForm.goods_cat.length === 3) {
        return this.addForm.goods_cat[2]
      }
      return null
    }
  },
  methods: {
    // 获取商品分类数据列表
    getCateList() {
      //发请求获取所有分类信息
      let url = "http://localhost:8080/categories/list"
      this.axios.get(url).then((response) => {
        this.catArr = response.data.data;
        console.log("分类list")
      })
    },
    // 级联选择器选中项变化时出发
    handleChange() {
      if (this.addForm.goods_cat.length !== 3) {
        this.addForm.goods_cat = []
      }
    },
    // 添加商品
    addGoods() {
        if (!valid) return this.$message.error('请填写必要的表单项！');
        let url = "http://localhost:8080/goods/add"
      this.axios.post(url,this.addForm)
    }
  }
}
</script>

<style lang='less' scoped>
.el-checkbox {
  margin: 0 8px 0 0 !important;
}

.previewImg {
  width: 100%;
}

.btnAdd {
  margin-top: 15px
}
</style>
